<template>
    <div class="home" style="height: 100%;">
      <el-container style="height: 100%;">
          <!-- 头部区域 -->
          <el-header>
            <Header></Header>    
          </el-header>
          <el-container>
              <!-- 左侧菜单区域 -->
              <el-aside :width="$store.state.isCollapse? '64px':'200px'">
                <Menu></Menu>
              </el-aside>
              <el-main>
                  <!-- 选项卡菜单 -->
                    <TagMenu></TagMenu>
                  <!-- 主体内容 -->
                   <router-view v-slot="{ Component }">
                        <keep-alive :max="8">
                            <component :is="Component"></component>
                        </keep-alive>
                   </router-view>
              </el-main>
          </el-container>
      </el-container>
    </div>
  </template>
  
<script setup>
import Header from '@/components/Header.vue'
import Menu from '@/components/Menu.vue'
import TagMenu from '@/components/TagMenu.vue'
</script>
  
<style lang="less" scoped>
.el-header{
    background-color: #1AA094;
}
.el-main{
    background: #F2F4F5;
    height: 100%;
}
.el-aside{
    height: 100%;
    background: #32363f;
}
</style>